<template>
  <div class="title flex-between-center">
    <div class="title_content align-items-center">
      <p class="title_decorate"></p>
      <div class="title_text">{{ titleText }}</div>
    </div>
    <slot />
  </div>
</template>

<script lang="ts">
import { Component, Mixins, Prop } from 'vue-property-decorator'
import serve from '../serve'

@Component({
  name: 'CardTitle',
})
export default class extends Mixins(serve) {
  @Prop() titleText!: string
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/main.scss';
.title {
  height: rem(96);
  padding: 0 rem(24);
  .title_content {
    display: flex;
  }
  .title_decorate {
    width: rem(7);
    height: rem(28);
    background: var(--mainColor1);
  }
  .title_text {
    font-size: rem(32);
    font-weight: 500;
    color: #2a2e31;
    line-height: rem(32);
    max-width: rem(400);
    margin-left: rem(12);
    @include text-overflow;
  }
}
</style>
